<template>
    <div ref="eCharts" style="height: 100%"></div>
</template>

<script>
    import BaseCharts from "./BaseCharts";
    export default {
        name: "LineCharts",
        mixins:[BaseCharts],
        mounted(){
            this.$nextTick(function (){
                this.draw();
            })
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"charts",key);
            },
            draw(){
               var  option = {
                    title: {
                        text: this.i18n('lineChart','折线图堆叠')
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [this.i18n('emailMarket','邮件营销'), this.i18n('alliance','联盟广告'), this.i18n('videoAD','视频广告'), this.i18n('directAccess','直接访问'), this.i18n('engine','搜索引擎')]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [this.i18n('Monday','周一'), this.i18n('Tuesday','周二'), this.i18n('Wednesday','周三'), this.i18n('Thursday','周四'), this.i18n('Friday','周五'), this.i18n('Saturday','周六'), this.i18n('Sunday','周日')]
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: this.i18n('emailMarket','邮件营销'),
                            type: 'line',
                            stack: this.i18n('total','总量'),
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: this.i18n('alliance','联盟广告'),
                            type: 'line',
                            stack: this.i18n('total','总量'),
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: this.i18n('videoAD','视频广告'),
                            type: 'line',
                            stack: this.i18n('total','总量'),
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: this.i18n('directAccess','直接访问'),
                            type: 'line',
                            stack: this.i18n('total','总量'),
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: this.i18n('engine','搜索引擎'),
                            type: 'line',
                            stack: this.i18n('total','总量'),
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };

                this.drawCharts(option);
            }
        }
    }
</script>

<style scoped>

</style>